<!DOCTYPE html>
<html>
<head>
  <script src="three.min.js"></script>
  <script src="./lib/MTLLoader.js"></script>
  <script src="./lib/OBJLoader.js"></script>
  <!-- ---------------------------------------------------------------------------

    灯光 light
    当环境光不是白色或灰色的时候，渲染的效果往往会很奇怪。
    因此，环境光通常使用白色或者灰色，作为整体光照的基础。

    在设置环境光时
    THREE.AmbientLight(hex)

   ---------------------------------------------------------------------------- -->
  <script>
    function init() {
      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(500, 375);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColor(0x000000)
      let scene = new THREE.Scene();

      let camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, .01, 800)
      camera.position.set(2, 2, 3);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);

      // 环境光
      var light = new THREE.AmbientLight(0xcccccc);
      scene.add(light);

//      let light = new THREE.DirectionalLight(0xffffff);
//      light.position.set(2, 10, 5);
//      scene.add(light);

      var mtlloader = new THREE.MTLLoader();
      var objloader = new THREE.OBJLoader();
      mtlloader.load('./lib/port.mtl', function (materials) {
        materials.preload()
        objloader.setMaterials(materials)
        objloader.load('./lib/port.obj', function (object) {
          scene.add(object);
          object.position.y = -2;
          renderer.render(scene, camera)
        });
      });
    }
  </script>
</head>
<body onload="init()">
</body>
</html>
